<template>
    <el-container class="login">
      <el-col class="login-form">
        <h4>用户登录</h4>
        <avue-form ref="form" v-model="obj" :option="option">
            <template slot="menuForm">
              <el-button type="primary" @click="handleSubmit">提 交</el-button>
            </template>
        </avue-form>
      </el-col>
    </el-container>
</template>


<script>
export default {
    data() {
      return {
        obj:{},
        sizeValue:''
      }
    },
    computed: {
       option(){
         return{
          labelWidth:'0',
          submitBtn: false,
          emptyBtn: false,
          column: [{
                  label:"用户名",
                  prop: "username",
                  span: 24,
                  prefixIcon: 'el-icon-tickets',
                  rules: [{
                      message: "请输入用户名",
                      trigger: "blur"
                  }],
              },
              {
                  label:"密码",
                  prefixIcon: 'el-icon-tickets',
                  prop: "name",
                  span:24,
                  rules: [{
                      message: "请输入密码",
                      trigger: "blur"
                  }],
              }]
          }
       }
    },
    mounted(){
    },
    methods:{
        submit () {
          this.$message.success('当前数据'+JSON.stringify(this.obj));
        }
    }
  }
</script>

<style>
  .login {
    position: relative;
    top: 50%;
    margin-top: -150px;
  }
  .login-form {
    margin: auto;
    width: 388px;
  }
  h4 {
    font-weight: normal;
    margin: 0;
    padding-bottom: 10px;
    font-size: 24px;
    letter-spacing: 12px;
  }
  .avue-form {
    padding-left: 20px;
  }

  .login-form button {
    width: 100%;
  }

  .login label {
    font-size: 0;
    padding: 0;
  }
</style>
